<template>
  <div class="addBusines_box">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      size="mini"
    >
      <el-form-item label="店铺名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="店铺简介" prop="description">
        <el-input v-model="ruleForm.description"></el-input>
      </el-form-item>
      <el-form-item label="店铺标语" prop="promotion_info">
        <el-input v-model="ruleForm.promotion_info"></el-input>
      </el-form-item>
      <el-form-item label="店铺分类" prop="category">
        <el-select v-model="ruleForm.category" placeholder="请选择店铺分类">
          <el-option label="快餐便当/简餐" value="快餐便当/简餐"></el-option>
          <el-option label="时尚饮品/饮品" value="时尚饮品/饮品"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺特点" prop="type">
<!--        <el-checkbox-group v-model="ruleForm.type">-->
<!--          <el-checkbox label="品牌保证" name="type"></el-checkbox>-->
<!--          <el-checkbox label="蜂鸟专送" name="type"></el-checkbox>-->
<!--          <el-checkbox label="新开店铺" name="type"></el-checkbox>-->
<!--          <el-checkbox label="外卖保" name="type"></el-checkbox>-->
<!--          <el-checkbox label="准时达" name="type"></el-checkbox>-->
<!--          <el-checkbox label="开发票" name="type"></el-checkbox>-->
<!--        </el-checkbox-group>-->
        <el-switch
          v-model="value[0]"
          :inactive-text="ruleForm.type[0]">
        </el-switch>
        <el-switch
          v-model="value[1]"
          :inactive-text="ruleForm.type[1]">
        </el-switch>
        <el-switch
          v-model="value[2]"
          :inactive-text="ruleForm.type[2]">
        </el-switch>
        <br>
        <el-switch
          v-model="value[3]"
          :inactive-text="ruleForm.type[3]">
        </el-switch>
        <el-switch
          v-model="value[4]"
          :inactive-text="ruleForm.type[4]">
        </el-switch>
        <el-switch
          v-model="value[5]"
          :inactive-text="ruleForm.type[5]">
        </el-switch>
      </el-form-item>
      <el-form-item label="配送费">
        <el-input-number v-model="float_delivery_fee" :step="1"></el-input-number>
      </el-form-item>
      <el-form-item label="起步价">
        <el-input-number v-model="float_minimum_order_amount" :step="1"></el-input-number>
      </el-form-item>
      <el-form-item label="营业时间" required>
        <el-col :span="11">
          <el-time-picker
            is-range
            v-model="time1"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="上传店铺头像">
        <el-upload
          class="avatar-uploader"
          :action='baseUrl+"/statis/addimg/shop"'
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="上传营业执照" >
        <el-upload
          class="avatar-uploader"
          :action='baseUrl+"/statis/addimg/licence"'
          :show-file-list="false"
          :on-success="handleAvatarSuccess1"
          :before-upload="beforeAvatarUpload1">
          <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {addShop} from '../api/getData'
  import { baseUrl } from "../config/env"
export default {
  name:'addshopping',
  created(){
    this.baseUrl= baseUrl
  },
  data() {
    return {
      baseUrl:'',
      imageUrl:'',
      imageUrl1:'',
      image_path:'',
      license:'',
      value:[true,true,true,true,true,true],
      float_delivery_fee: 1, //配送费
      float_minimum_order_amount: 1, //起步价
      time1: [new Date(2016, 9, 10, 11, 1), new Date(2016, 9, 10, 23, 59)], //营业时间
      ruleForm: {
        name: "", //店铺名称
        address: "", //店铺地址
        phone: "", //联系方式
        description: "", //店铺介绍
        promotion_info: "", //店铺标语
        category: "", //店铺分类
        type: ["品质保证","蜂鸟专送","新开店铺","外卖保","准时达","开发票"],
        type1:''
      },
      rules: {
        name: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { min: 7, max: 14, message: "长度在 7 到 14 个字符", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入店铺简介", trigger: "blur" },
          { min: 5, max: 40, message: "长度在 5 到 80 个字符", trigger: "blur" }
        ],
        promotion_info: [
          { required: true, message: "请输入店铺标语", trigger: "blur" },
          { min: 4, max: 24, message: "长度在 4 到 24 个字符", trigger: "blur" }
        ],
        category: [
          { required: true, message: "请选择店铺分类", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        // type: [
        //   {
        //     type: "array",
        //     required: true,
        //     message: "请至少选择一个活动性质",
        //     trigger: "change"
        //   }
        // ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      }
    };
  },
  methods: {
    handleAvatarSuccess (res, file) { // 和上传图片相关
      this.image_path = res.filename
      this.imageUrl = URL.createObjectURL(file.raw); // 和上传图片相关
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
  },
    handleAvatarSuccess1 (res, file) { // 和上传图片相关
      this.license = res.filename
      this.imageUrl1 = URL.createObjectURL(file.raw); // 和上传图片相关
    },
    beforeAvatarUpload1 (file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          var type = [];
          this.value.forEach((item,index) => {
            if(item){
              type.push(this.ruleForm.type[index])
            }
          })
          this.ruleForm.type1 = type.join("/")
          let upload = {
            ...this.ruleForm,
            image_path:this.image_path,
            license:this.license,
            opening_hours:this.time1,
            float_delivery_fee:this.float_delivery_fee,
            float_minimum_order_amount:this.float_minimum_order_amount
          }
          console.log(upload)
          var res = await addShop({
            params:{
              ...upload
            },
            credentials:true})
          if(res.body.status){
              this.$message({
                type:'success',
                message:'店铺添加成功'
              })
            this.$router.push("market")
          }else{
            this.$message({
              type:'error',
              message:res.body.message+',店铺添加失败'
            })
          }
          // alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
.addBusines_box {
  width: 50%;
  height: 100%;
  margin-left: 50%;
  margin-top: 14px;
  transform: translateX(-60%);
}
.avatar-uploader .el-upload {
  border: 1px dashed #000!important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.avatar {
  width: 90px;
  height: 90px;
  display: block;
}
</style>
